<template>
  <div class="container">

    <el-row :gutter="10">
      <el-col :span="1.5">
        <div class="title">患者姓名</div>
      </el-col>
      <el-col :span="5">
        <el-input v-model="name" placeholder="请输入患者姓名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="paging(1)">查询</el-button>
      </el-col>
    </el-row>

    <el-table
        :data="page.list"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="患者姓名">
      </el-table-column>
      <el-table-column
          prop="idType"
          label="证件类型">
      </el-table-column>
      <el-table-column
          prop="idcard"
          label="证件号">
      </el-table-column>
      <el-table-column
          prop="visitType"
          label="接诊类型">
        <template #default="{row}">
          <el-tag :type="getVisitTypeTag(row.visitType)">
            {{ formatVisitType(row.visitType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          label="创建时间">
        <template v-slot="scope">
          {{getDateTimeStr(new Date(scope.row.createTime))}}
        </template>
      </el-table-column>
      <el-table-column
          prop="contactPhone"
          label="联系人手机号">
      </el-table-column>

    </el-table>

    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="paging"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from "axios";
import {getDateTimeStr} from "@/util/DateUtil";
const page=ref({})
const pageSize=ref(8)
const name=ref('')

onMounted(()=>{
  paging(1)
})

const paging = (curPage) => {
  axios.get('patient/findAllPatient',{
    params:{
      curPage:curPage,
      pageSize:pageSize.value,
      name: name.value
    }
  }).then(res=>{
    page.value=res.data
  })
}

const handleSizeChange = (ps) => {
  pageSize.value=ps
  paging(1)
}

const visitTypeMap = {
  0: '自费',
  1: '北京医保',
  2: '异地医保'
}

const getVisitTypeTag = (type: number) => {
  const map = {
    0: '',
    1: 'success',
    2: 'warning'
  }
  return map[type] || ''
}

// 格式化就诊类型显示
const formatVisitType = (type: number) => {
  return visitTypeMap[type] || '未知类型'
}

</script>

<style scoped>
.container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.footer {
  text-align: right;
  color: #888;
  font-size: 0.9em;
}
</style>